<template>
  <div class="context">
    <!--搜索框-->
    <!-- <el-input style="width: 400px; margin: 20px 20px 20px 20px" v-model="inputValue" placeholder="请输入内容"
      prefix-icon="el-icon-search">
    </el-input> -->
    <!-- <el-button type="primary" @click="showadd" style="height: 40px; margin: 0px 0px 0px 20px">
      添加身份</el-button> -->


    <!-- 显示roleType -->
    <template>
      <el-table :data="roles" style="width: 100%" height="80%">
        <el-table-column label="id">
          <template slot-scope="scope">
            <span>{{ scope.row.rid }}</span>
          </template>
        </el-table-column>


        <el-table-column label="TypeName">
          <template slot-scope="scope">
            <span>{{ scope.row.rname }}</span>
          </template>
        </el-table-column>


        <el-table-column label="操作">

          <template slot-scope="scope">
            <el-button type="text" @click="editrole(scope.$index, scope.row)" size="small">编辑</el-button>
            <el-button type="text" @click="del(scope.$index, scope.row)" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">


      </div>
    </template>

    <el-dialog title="权限" :visible.sync="dialogresetVisible" width="50%" center>
      <!-- <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checked" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="router in routers" :label="router.name" :key="router.tid">{{ router.label }}</el-checkbox>
        </el-checkbox-group>
      </template> -->

    
        <el-checkbox-group v-model="checkList" >
          <el-checkbox v-for="router in routers" :label="router.label" :key="router.label">{{ router.label }}</el-checkbox>
        </el-checkbox-group>

      <div style="margin-top: 20px">
        <el-button @click="change">确定</el-button>
        <el-button @click="dialogresetVisible=false">取消</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
export default {
  
  data() {
   
    return {
      rid:"",
      tids:[],
      checkList: [],
      routers: [
      ],//所有router

      multipleSelection: [],
      data: [],
      formLabelWidth: "120px",
      newtable: {
        label: "",
        class: "",
        path: "",
      },
      dialogresetVisible: false,
      pagecount: 99,//查询的总数
      currentPage4: 4,
      roles: [],//返回用户数据数组
      req: {
        "pageIndex": 0,
        "pageCount": 10
      }
    };
  },

  created() {
    var that = this;
    console.log("Vue 初始化完成 created");
    this.pushdata();
    this.pushrouter();
  },
  methods: {
    pushrouter() {
      var that = this;
      that.$axios.post("/api/Router/ShowRouter")
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.routers = response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    },

    editrole(scope, row) {
      console.log(row);
      this.rid=row.rid
      this.dialogresetVisible = true
      for (let index1 = 0; index1 < this.routers.length; index1++) {
        for (let index2 = 0; index2 < row.tree.length; index2++) {
          if (this.routers[index1].label == row.tree[index2].label) {
            this.checkList.push(row.tree[index2].label)
          }
        }
      }
    
    },
    change(){
      this.tids=[];
      for (let index1 = 0; index1 <this.checkList.length; index1++) {
       for (let index2 = 0; index2 < this.routers.length; index2++) {
          if (this.routers[index2].label==this.checkList[index1]) {
            this.tids.push(this.routers[index2].tid)
          }
       }
      }

      var that = this;
      console.log(that.tids);
      console.log(that.rid);
      that.$axios.get("/api/Role/AddRole",{
        params: {
        tid:that.tids,
        rid:that.rid
        }

      })
        .then(function (response) {
          console.log(response.data);
          if (response.data.code == 200) {
            that.roles = response.data.data
            that.$message.success(response.data.mes);
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
        that.dialogresetVisible = false
        
    },
    del(scope, row) {
      console.log(row);
      var that = this;
      that.$axios
        .post("/api/Role/RoleShow", {
          id: row.id
        })
        .then(function (response) {
          that.$message({
            message: response.data.mes
          });
        })
        .catch(function (error) {
          console.log(error);
          that.$message({
            message: "操作失败"
          });
        });

      that.pushdata()
    },
    reset() {
      this.req = {
        "pageIndex": 0,//每次请求数据的开始位置
        "pageCount": 10//每次请求数据的总量
      }
    },

    pushdata() {
      var that = this;
      that.$axios.post("/api/Role/RoleShow")
        .then(function (response) {

          console.log(response.data);
          if (response.data.code == 200) {
            that.roles = response.data.data
          } else {
            that.$message.error(response.data.mes);
          }
        })
        .catch(function (error) {
          that.$message.error('网络链接超时！');
          console.log(error);
        });
    }

  }
};
</script>

<style scoped>

</style>
